<template>
  <div id="MainMenu">
    <el-menu
      :router="true"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#2b303b"
      text-color="#f0f0f0"
      active-text-color="#00a4ff">
      <el-submenu index="2" v-if="loginModel.hasRole(['admin','manager'])">
        <template slot="title"><i test_id="setup" class="el-icon-setting"></i>系统配置</template>
        <el-menu-item index="DeviceConfig" test_id="deviceConfig" v-if="loginModel.hasRole(['admin'])"
                      route="/DeviceConfig">设备类型
        </el-menu-item>
        <el-menu-item index="ListInstrument" v-if="loginModel.hasRole(['admin'])" route="/ListInstrument">设备管理
        </el-menu-item>
        <el-menu-item index="ListFormSpec" v-if="loginModel.hasRole(['admin'])" route="/ListFormSpec">表单设计
        </el-menu-item>

        <el-menu-item index="ListUser" v-if="loginModel.hasRole(['admin','manager'])" route="/ListUser">用户管理
        </el-menu-item>

        <el-menu-item index="Options" v-if="loginModel.hasRole(['admin','manager'])" route="/Options">选项管理
        </el-menu-item>
        <el-menu-item index="Config" v-if="loginModel.hasRole(['admin','manager'])" route="/Config">系统配置
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3" v-if="loginModel.hasRole(['admin','operator','manager'])">
        <template slot="title"><i class="el-icon-edit-outline"></i>检验表单</template>
        <el-menu-item :index="'form-'+formSpec.id" @click="newForm(formSpec)" v-for="formSpec in formSpecs.formSpecs">
          {{formSpec.name}}
        </el-menu-item>
        <el-menu-item index="3.2" route="/ListForm" v-if="loginModel.hasRole(['admin','manager'])">历史表单
        </el-menu-item>
      </el-submenu>
      <el-submenu index="4" v-if="loginModel.hasRole(['admin','operator','manager'])">
        <template slot="title"><i class="el-icon-edit-outline"></i>报表</template>
        <el-menu-item :index="'report-'+report.id" @click="showReport(report)" v-for="report in reports.reports">
          {{report.name}}
        </el-menu-item>
        <el-menu-item index="ListReport" v-if="loginModel.hasRole(['admin'])" route="/ListReport">报表设计</el-menu-item>
      </el-submenu>
      <el-submenu index="8" v-if="loginModel.logon">
        <template slot="title"><i class="el-icon-user"></i>{{loginModel.name}}</template>
        <el-menu-item index="Logout" route="/Logout" v-if="loginModel.logon">退出登录</el-menu-item>
        <el-menu-item index="Profile" route="/Profile" v-if="loginModel.logon">个人资料</el-menu-item>
      </el-submenu>

    </el-menu>

  </div>
</template>

<script>
import LoginModel from '@/domain/Login.js'
import ListReportModel from '@/domain/ListReport.js'
import ShowReportModel from '@/domain/ShowReport.js'
import ListFormSpecModel from '@/domain/ListFormSpec.js'

export default {
  name: 'MainMenu',
  data () {
    return {
      reports: new ListReportModel(),
      loginModel: new LoginModel(),
      report: new ShowReportModel(),
      formSpecs: new ListFormSpecModel()
    }
  },
  methods: {
    showReport: async function (report) {
      this.$router.replace('/ShowReport/' + report.id)
    },
    newForm: function (formspec) {
      this.$router.replace('/NewForm/' + formspec.id)
    },
    async checkLogin () {
      await this.loginModel.getLogin()
      this.$values['name'] = this.loginModel.name
      if (!this.loginModel.logon) {
        this.$router.replace('/')
        return
      }
      await this.formSpecs.loadAll()
      let error = await this.reports.loadAll()
      if (error) {
        this.$message.error(error)
      }
    }
  },
  created () {
    this.$bus.on('loginStatusChanged', this.checkLogin)
  },
  beforeDestroy () {
    this.$bus.off('loginStatusChanged', this.checkLogin)
  },
  mounted: async function () {
    this.checkLogin()
  }
}
</script>
